<template>
<!-- 主容器 - 填充整个页面 -->
<div class="w-full min-h-screen" style="background-color: var(--content-bg-color)">
  
  <!-- 英雄区域 - 全屏显示 -->
  <div class="hero-section relative overflow-hidden">
    <!-- 背景图片 -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-500">
      <div class="absolute inset-0 bg-black bg-opacity-30"></div>
    </div>
    
    <!-- 装饰性粒子效果 -->
    <div class="absolute inset-0 hero-particles"></div>
    
    <!-- 内容 -->
    <div class="relative z-10 flex items-center justify-center h-full">
      <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
        <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 hero-title">
          阿杜博客
        </h1>
        <p class="text-2xl md:text-3xl text-white text-opacity-90 mb-12">
          探索技术世界，分享编程智慧
        </p>
        <div class="flex justify-center space-x-6">
          <div class="px-6 py-3 bg-white bg-opacity-20 rounded-full text-white text-lg backdrop-blur-sm">
            <i class="mr-2">📚</i>技术分享
          </div>
          <div class="px-6 py-3 bg-white bg-opacity-20 rounded-full text-white text-lg backdrop-blur-sm">
            <i class="mr-2">💡</i>编程思考
          </div>
          <div class="px-6 py-3 bg-white bg-opacity-20 rounded-full text-white text-lg backdrop-blur-sm">
            <i class="mr-2">🚀</i>前端开发
          </div>
        </div>
        
        <!-- 向下滚动提示 -->
        <div class="mt-16">
          <div class="animate-bounce">
            <svg class="w-8 h-8 text-white mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
            </svg>
          </div>
          <p class="text-white text-opacity-70 mt-2">向下滚动</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 内容区域 -->
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      
      <!-- 左侧主内容区域 -->
      <div class="lg:col-span-3">
          <!-- 文章列表 -->
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

  <div v-for="(article, index) in articles" :key="index"
      class="article-card bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
      <a @click="goArticleDetail(article.id)" class="cursor-pointer block">
          <img class="w-full h-48 object-cover" :src="article.titleImage" :alt="article.title" />
      </a>
      <div class="p-6">
          <!-- 标签 -->
          <div class="mb-4 flex flex-wrap gap-2">
              <span @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in article.tags"
                  :key="index"
                  class="inline-block bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 cursor-pointer transition-colors duration-200 tag-item">
                  {{ item.name }}
              </span>
          </div>
          <a @click="goArticleDetail(article.id)" class="cursor-pointer">
              <h2 class="mb-3 text-xl font-bold tracking-tight text-gray-900 hover:text-blue-600 transition-colors duration-200 line-clamp-2 article-title">{{
                  article.title }}</h2>
          </a>
          <p class="mb-4 text-gray-600 line-clamp-3 article-description">{{ article.description }}</p>
          <!-- meta 信息 -->
          <div class="flex items-center text-sm text-gray-500 space-x-4 article-meta">
              <div class="flex items-center">
                  <svg class="w-4 h-4 mr-2" aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M5 1v3m5-3v3m5-3v3M1 7h18M5 11h10M2 3h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Z" />
               </svg>
               {{ article.createTime }}
               </div>

               <div class="flex items-center">
                   <svg class="w-4 h-4 mr-2" aria-hidden="true"
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
                       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                           d="M1 5v11a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H1Zm0 0V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                   </svg>
                   <a @click="goCatagoryArticleListPage(article.category.id, article.category.name)"
                       class="hover:text-blue-600 cursor-pointer transition-colors duration-200 category-link">{{ article.category.name }}</a>
               </div>
           </div>
       </div>
   </div>
   </div>

   <!-- 简化的分页 -->
   <nav aria-label="Page navigation" v-if="total > 0" class="mt-12 flex justify-center">
   <div class="pagination-wrapper bg-white rounded-2xl shadow-lg border border-gray-200 p-2">
     <ul class="flex items-center space-x-2">
       <!-- 上一页按钮 -->
       <li>
           <button v-if="current > 1" @click="getArticles(current - 1)"
               class="pagination-btn pagination-btn-nav">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
               </svg>
           </button>
           <span v-else class="pagination-btn pagination-btn-disabled">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
               </svg>
           </span>
       </li>
       
       <!-- 页码按钮 -->
       <li v-for="page in pages" :key="page">
           <button @click="getArticles(page)"
               class="pagination-btn"
               :class="page == current ? 'pagination-btn-active' : 'pagination-btn-normal'">
               {{ page }}
           </button>
       </li>
       
       <!-- 下一页按钮 -->
       <li>
           <button v-if="current < pages" @click="getArticles(current + 1)"
               class="pagination-btn pagination-btn-nav">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
               </svg>
           </button>
           <span v-else class="pagination-btn pagination-btn-disabled">
               <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
               </svg>
           </span>
       </li>
     </ul>
   </div>
   </nav>
       </div>

       <!-- 右边栏 -->
       <div class="lg:col-span-1">
         <div class="sticky top-6 space-y-6">
           <!-- 用户信息卡片 -->
           <UserInfoCard></UserInfoCard>
           
           <!-- 分类区域 -->
           <div class="sidebar-card bg-white border border-gray-200 rounded-xl shadow-sm p-6">
             <h2 class="mb-4 text-lg font-bold text-gray-900 sidebar-title">分类</h2>
             <div class="space-y-2">
                 <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                     :key="index"
                     class="sidebar-link flex items-center w-full px-4 py-3 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-blue-700 transition-colors duration-200 group">
                     <svg class="w-4 h-4 mr-3 text-gray-500 group-hover:text-blue-600" aria-hidden="true"
                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 18">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                             stroke-width="1.5"
                             d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5" />
                     </svg>
                     {{ item.name }}
                 </a>
             </div>
           </div>
           
           <!-- 标签区域 -->
           <div class="sidebar-card bg-white border border-gray-200 rounded-xl shadow-sm p-6">
             <h2 class="mb-4 text-lg font-bold text-gray-900 sidebar-title">标签</h2>
             <div class="flex flex-wrap gap-2">
                 <span @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                     class="tag-item inline-block bg-green-100 text-green-800 text-sm font-medium px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 cursor-pointer transition-colors duration-200">
                     {{ item.name }}
                 </span>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
</div>
</template>


<script setup lang="ts">
import UserInfoCard from '@/layouts/client/modules/UserInfoCard.vue';
import { getIndexArticles } from '@/service/api/frontend/index'
import { getCategories } from '@/service/api/frontend/category';
import { getTags } from '@/service/api/frontend/tag';
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref } from 'vue'

const router = useRouter()

const goArticleDetail = (articleId: string | number) => {
    console.log('跳转详情页' + articleId)
    router.push({ path: '/client/home/article-detail', query: { articleId: articleId } })
}

const articles = ref([])
// 当前页码
const current = ref(1)
const total = ref(0)
const size = ref(10)
const pages = ref(0)

// 获取分页数据
async function getArticles(currentNo: number) {
   
    const res =  await getIndexArticles({ current: currentNo, size: size.value })

        console.log(res.data)

                articles.value = res.data.data
                current.value = res.data.current
                total.value = res.data.total
                size.value = res.data.size
                pages.value = res.data.pages

}
getArticles(current.value)

// 获取分类
const categories = ref([])
getCategories().then((e) => {
    console.log('获取分类数据')
    console.log(e)
    categories.value = e.data
})


// 获取标签
const tags = ref([])
getTags().then((e) => {
    console.log('获取标签数据')
    console.log(e)
    tags.value = e.data
})


const goCatagoryArticleListPage = (id: string | number, name: string) => {
    router.push({ path: '/client/category/category-article', query: { id: id, name: name } })
}

const goTagArticleListPage = (id: string | number, name: string) => {
    console.log('跳转 id' + id)
    router.push({ path: '/client/tags/tag-article', query: { id: id, name: name } })
}

</script>


<style scoped>
/* 自定义CSS变量 */
:root {
  --content-bg-color: #f9fafb; /* 亮色模式背景 */
  --card-bg-color: #ffffff;
  --card-border-color: #e5e7eb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-accent: #3b82f6;
}

/* 暗黑主题变量 */
:global(.dark) {
  --content-bg-color: #1c1c1c; /* 自定义暗黑背景 */
  --card-bg-color: #2d2d2d;
  --card-border-color: #404040;
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-accent: #60a5fa;
}

/* 英雄区域样式 - 全屏高度 */
.hero-section {
  height: 100vh; /* 全屏高度 */
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 英雄区域动画效果 */
.hero-particles {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.3), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.2), transparent),
    radial-gradient(2px 2px at 160px 30px, rgba(255,255,255,0.3), transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: sparkle 20s linear infinite;
}

@keyframes sparkle {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

.hero-title {
  text-shadow: 0 4px 8px rgba(0,0,0,0.3);
  animation: fadeInUp 1.5s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 文章卡片样式 */
.article-card {
  background-color: var(--card-bg-color);
  border-color: var(--card-border-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.article-title {
  color: var(--text-primary);
}

.article-description {
  color: var(--text-secondary);
}

.article-meta {
  color: var(--text-secondary);
}

.category-link:hover {
  color: var(--text-accent);
}

/* 标签样式 */
.tag-item {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  border: none;
  transition: all 0.2s ease;
}

.tag-item:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* 简化的分页样式 */
.pagination-wrapper {
  background: var(--card-bg-color);
  border-color: var(--card-border-color);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pagination-btn-normal {
  background: transparent;
  color: var(--text-secondary);
}

.pagination-btn-normal:hover {
  background: var(--text-accent);
  color: white;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.pagination-btn-active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.pagination-btn-nav {
  background: var(--card-bg-color);
  color: var(--text-secondary);
  border: 2px solid var(--card-border-color);
}

.pagination-btn-nav:hover {
  background: var(--text-accent);
  color: white;
  border-color: var(--text-accent);
  transform: translateY(-2px) scale(1.05);
}

.pagination-btn-disabled {
  background: transparent;
  color: #d1d5db;
  cursor: not-allowed;
  opacity: 0.5;
}

/* 侧边栏样式 */
.sidebar-card {
  background-color: var(--card-bg-color);
  border-color: var(--card-border-color);
  transition: all 0.3s ease;
}

.sidebar-title {
  color: var(--text-primary);
}

.sidebar-link {
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.sidebar-link:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--text-accent);
  transform: translateX(4px);
}

/* 确保文本截断工作正常 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    height: 100vh; /* 保持全屏 */
  }
  
  .hero-title {
    font-size: 3rem;
  }
  
  .pagination-wrapper {
    margin: 0 1rem;
  }
  
  .pagination-btn {
    min-width: 44px;
    height: 44px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .hero-title {
    font-size: 2.5rem;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  /* 移动设备上标签布局调整 */
  .hero-section .flex {
    flex-direction: column;
    space-y: 3;
  }
  
  .hero-section .space-x-6 > * + * {
    margin-left: 0;
    margin-top: 0.75rem;
  }
}

/* 暗黑模式特殊处理 */
:global(.dark) .hero-particles {
  opacity: 0.7;
}

:global(.dark) .pagination-wrapper {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

:global(.dark) .article-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* 平滑的主题切换动画 */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* 滚动行为优化 */
html {
  scroll-behavior: smooth;
}
</style> 